<template>
  <div class="workinfo">
    <van-nav-bar left-text="返回" title="职位详情" left-arrow @click-left="onClickLeft" />
    <div v-for="el in listInfoData" :key="el.uid" class="all">
      <div class="workTitle">
        <h2>{{el.titel}}</h2>
        <span>{{el.xinshui}}</span>
      </div>
      <div class="workTitleBottom">
        <van-icon name="location-o" />
        <span>{{el.adderss}}</span>
        <van-icon name="calender-o" />
        <span>{{el.gage}}</span>
        <van-icon name="user-o" />
        <span>{{el.xueli}}</span>
      </div>

      <div class="headerImg" v-for="ele in companyMsg" :key="'item+'+ele.uid">
        <van-image round width="3.5rem" height="3.5rem" :src="el.tsrc" />
        <div class="headerMsg">
          <p>{{ele.faren}} ● HR</p>
          <p>{{el.gname}}</p>
        </div>
      </div>
      <div class="position_msg" v-for="item in positionMsg" :key="'item-'+item.uid">
        <h5>职位详情</h5>
        <p>【岗位职责】</p>
        <ul>
          <li>{{item.one}}</li>
          <li>{{item.two}}</li>
          <li>{{item.three}}</li>
          <li>{{item.four}}</li>
          <li>{{item.five}}</li>
          <li>{{item.six}}</li>
        </ul>
        <div class="companyDsc">
          <h5>【团队介绍】</h5>
          <p>{{item.jianjie}}</p>
        </div>
      </div>
      <div class="Label">
        <span>人力资源管理</span>
        <span>招聘配置</span>
        <span>薪酬福利</span>
        <span>美女多多</span>
      </div>

      <div class="companyLabel" v-for="ele in companyMsg" :key="ele.uid">
        <van-image round width="3.5rem" height="3.5rem" :src="el.src" />
        <div class="companyMsg">
          <p>{{el.gname}}</p>
          <p>{{ele.condition}}</p>
        </div>
      </div>

      <div class="addressImg baidumap" id="allmap">
        <img src="../../../assets/address.png" />
      </div>

      <div class="warn">
        <van-icon name="warn-o" />
        <span>温馨提示</span>
        <p>该boss承诺名下所有职位不向您收费, 如有不实, 请立即举报!</p>
      </div>

      <div class="theBottom">
        <van-cell-group>
          <van-cell title="你的竞争力分析" value="使用竞争力分析器>"></van-cell>
        </van-cell-group>
        <div class="slotLabel">
          近90天共有
          <span>13</span>个牛人沟通过该职位,相比他们,你的竞争力为第
          <span>8</span>名.
        </div>
      </div>
      <div class="btn" @click="gochat">
        <van-button type="info">立即沟通</van-button>
      </div>
    </div>
  </div>
</template>
<script>
import BMap from 'vue-baidu-map'
export default {
  data: () => ({
    id: '',
    listInfoData: [],
    positionMsg: [],
    companyMsg: []
  }),
  created () {
    this.denglu()
    this.id = this.$route.params.id
    this.getlists()
    this.getXqlist()
    this.getCompany()

    this.$store.state.activeinfo = 0
  },
  activated () {
    this.id = this.$route.params.id
    this.getlists()
    this.getXqlist()
    this.getCompany()
  },
  methods: {
    async getlists () {
      const {
        data: { data, status }
      } = await this.$http.get('/lists/' + this.id)
      if (status !== 1) return console.log('请求数据失败')
      console.log(data)
      this.listInfoData = data
      // console.log(this.id)
      // var user = JSON.parse(localStorage.getItem(key))
      // console.log(local)
    },
    async getXqlist () {
      const {
        data: { data, status }
      } = await this.$http.get('/xqlist/' + this.id)
      if (status !== 1) return console.log('请求失败哦')
      // console.log(data)
      this.positionMsg = data
      // console.log(this.positionMsg)
    },
    async getCompany () {
      const {
        data: { data, status }
      } = await this.$http.get('/company/' + this.id)
      if (status !== 1) return console.log('请求失败哦')
      this.companyMsg = data
    },
    onClickLeft () {
      this.$router.go(-1)
    },
    gochat () {
      this.getlists()
      const obj = {
        id: this.$route.params.id,
        img: this.listInfoData[0].tsrc,
        title: this.listInfoData[0].gname,
        name: this.companyMsg[0].faren
      }
      // console.log(obj)// vuex调用
      this.$store.dispatch('worklist_list', obj)
      this.$router.push('/news/interaction')
    },
    denglu () {
      if (!localStorage.getItem('user')) {
        this.$Toast('请先登录')
      }
    }
  }
}
</script>
<style lang="less" scoped>
.workinfo {
  .van-nav-bar,
  .van-hairline--bottom {
    background: #4dd599;
    .van-icon,
    .van-icon-arrow-left,
    .van-nav-bar__arrow,
    .van-nav-bar__text,
    .van-nav-bar__title,
    .van-ellipsis {
      color: #fff;
    }
  }

  .all {
    margin-left: -25px;
    .workTitle {
      display: flex;
      justify-content: space-around;
      align-items: center;
      span {
        font-size: 18px;
        color: #4dd599;
      }
    }
    .workTitleBottom {
      display: flex;
      justify-content: stretch;
      align-items: center;
      font-size: 12px;
      margin-left: 50px;
      margin-top: -13px;
      margin-bottom: 30px;
      span {
        padding: 0 5px;
      }
    }
    .headerImg {
      display: flex;
      align-items: center;
      margin-left: 50px;
      border-bottom: 1px solid #ccc;
      .van-image,
      .van-image--round {
        // width: 3.5rem !important;
        // height: 3.5rem !important;
        .van-image__error,
        .van-image__img,
        .van-image__loading {
          width: 60px !important;
          height: 60px;
          display: block;
        }
      }
      .headerMsg {
        font-size: 14px;
        font-weight: bold;
        margin: 0 10px;
      }
    }
    .position_msg {
      margin: 0 50px;
      border-bottom: 1px solid #cccccc;
      h5 {
        margin-left: 10px;
      }
      p {
        font-size: 14px;
        font-weight: bold;
      }
      ul {
        background: #eee;
        width: 114%;
        border-radius: 10px;
        padding: 0 9px;
        box-sizing: border-box;
        li {
          font-size: 14px;
          list-style: none;
          color: #999;
          padding: 2px 0;
        }
      }
      .companyDsc {
        p {
          font-size: 14px;
          font-weight: 100;
          width: 111%;
          padding-left: 8px;
          border-radius: 10px;
          background: #eee;
          color: #999;
        }
      }
    }
    .Label {
      display: flex;
      align-items: center;
      margin: 6px 50px 20px;
      span {
        display: inline-block;
        height: 23px;
        line-height: 23px;
        font-size: 14px;
        color: #333;
        background: #eee;
        margin: 2px 4px;
      }
    }
    .companyLabel {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      background: #eee;
      box-sizing: border-box;
      padding-left: 48px;
      .companyMsg {
        font-size: 14px;
        font-weight: bolder;
        margin: 0 10px;
        color: #333;
      }
    }
    .addressImg {
        box-sizing: border-box;
        background: beige;
        padding: 0 20px;
        width: 375px;
        margin-left: 25px;
        /* text-align: center; */
        border-radius: 18px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .warn {
      margin-left: 50px;
      .van-icon,
      .van-icon-warn-o {
        color: red;
        margin-right: 4px;
      }
      span {
        color: red;
        font-size: 14px;
        position: absolute;
      }
      p {
        color: #333;
        font-size: 12px;
      }
    }
    .theBottom {
      margin-bottom: 30px;
      .van-cell__title {
        margin-left: 25px;
        span {
          font-weight: bolder;
        }
      }
      .slotLabel {
        font-size: 12px;
        color: #999;
        margin-bottom: 20px;
        margin-left: 40px;
        span {
          color: #53cac3;
        }
      }
    }
    .btn {
      margin-bottom: 50px;
      .van-button,
      .van-button--info,
      .van-button--normal {
        width: 100%;
        background-color: #4dd599;
        border: none;
        span {
          margin-left: 23px;
        }
      }
    }
  }
}
</style>
